<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Statusbar Overlay</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p>Framework7 automatically detects if your app in full screen mode, and automatically shows statusbar overlay if app is in full screen mode (or hides statusbar if app is not in full screen mode). Its visibility can be forced using app parameters or using API:</p>
        <p class="row">
          <a class="col button button-fill" @click="showStatusbar">Show Statusbar</a>
          <a class="col button button-fill" @click="hideStatusbar">Hide Statusbar</a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  return {
    methods: {
      showStatusbar: function () {
        this.$app.statusbar.show();
      },
      hideStatusbar: function () {
        this.$app.statusbar.hide();
      },
    }
  }
</script>
